<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <title></title>
       
        
        <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/easyui/exporting.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/system/common.js"></script>


        <div style="height: 50px;width: 100%;align-content: center">
            <div style="height: 15px"></div>
            <select id="getDateType" style="height: 30px;width: 150px" onchange="getData($('#getDateType').val())">
                <option value="1" selected="selected"
                                 >近30天访问统计表</option>
                <option value="2">近12月访问统计表</option>
                <option value="3">本年度每周统计表</option>
                <option value="4">本年度每月统计表</option>
                <option value="5">本年度每季统计表</option>                
                <option value="6">去年度每周统计表</option>
                <option value="7">去年度每月统计表</option>
                <option value="8">去年度每季统计表</option>
            </select>
            
        </div>

        <div id="container" style="min-width:100%;height:700px"></div>

        <script type="text/javascript">
            
                $(function () {
                    getData($("#getDateType").val())
                });
                
                function getData(type) {
                    
                        $.ajax({
                                type:'post',

                                dataType:'json',

                                data:{"getType":type},
                                
                                url:getRootPath()+'/onlineStatistics/getOnlineStatisticsData',

                                success:function(data){

                                        var chart = new Highcharts.chart('container',{
                                                chart: {
                                                        type: 'column'
                                                },
                                                xAxis: {
                                                        categories: data.timePointList
                                                },
                                                title: {
                                                        text: data.titleText
                                                },
                                                yAxis: {
                                                        min: 0,
                                                        title: {
                                                                text: '访问量 (人)'
                                                        }
                                                },
                                                tooltip: {
                                                        // head + 每个 point + footer 拼接成完整的 table
                                                        headerFormat: '<span style="font-size:10px">{point.key}</span><table style="width: 200px">',
                                                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                                                '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
                                                        footerFormat: '</table>',
                                                        shared: true,
                                                        useHTML: true
                                                },
                                                plotOptions: {
                                                        column: {
                                                                borderWidth: 0
                                                        }
                                                },
                                                series: [{
                                                    name: data.onlineStatisticsGroupList[0].name,
                                                    data: data.onlineStatisticsGroupList[0].onlineStatisticsDataList
                                                },{
                                                    name: data.onlineStatisticsGroupList[1].name,
                                                    data: data.onlineStatisticsGroupList[1].onlineStatisticsDataList
                                                },{
                                                    name: data.onlineStatisticsGroupList[2].name,
                                                    data: data.onlineStatisticsGroupList[2].onlineStatisticsDataList
                                                },{
                                                    name: data.onlineStatisticsGroupList[3].name,
                                                    data: data.onlineStatisticsGroupList[3].onlineStatisticsDataList
                                                },{
                                                    name: data.onlineStatisticsGroupList[4].name,
                                                    data: data.onlineStatisticsGroupList[4].onlineStatisticsDataList
                                                } ]
                                        });
                                },
                                error:function(e){

                                }
                        });
                }
        </script>
 
        
    







